<template>
    <div class="btn-container">
        <button data-text="Start" class="btn btn-primary btn-ghost btn-border-stroke btn-text-float-up">
            <div class="btn-borders">
                <div class="border-top"></div>
                <div class="border-left"></div>
                <div class="border-bottom"></div>
                <div class="border-right"></div>
            </div>
            <span class="btn-text">Start</span>
        </button>
    </div>
</template>

<style lang="scss" scoped>
    .btn-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 140px;
        background: #1a1e23;
        margin-top: 20px;
    }

    .btn {
        $r: 0;
        $g: 255;
        $b: 255;
        $ease-in-duration: 0.25s;
        $ease-in-direction: cubic-bezier(0.95, 0.05, 0.795, 0.035);
        $ease-out-duration: 0.65s;
        $ease-out-delay: $ease-in-duration;
        $ease-out-direction: cubic-bezier(0.19, 1, 0.22, 1);
        position: absolute;
        padding: 1em 3em;
        font-size: 1em;
        line-height: 1.5;
        color: white;
        text-decoration: none;
        cursor: pointer;
        background-color: rgb($r, $g, $b);
        border: 1px solid rgb($r, $g, $b);
        transition: 0.25s;

        // 多余，测试了一下背景颜色变化
        // &:hover {
        //     background-color: rgb($r, $g, 79);
        // }
        // &-primary 和 &-ghost是为样式修改增加的类，起始可以合并在btn下
        &-primary {
            $r: 171;
        }

        &-ghost {
            color: rgb($r, $g, $b);
            background-color: transparent;
            border-color: rgb($r, $g, $b);
        }

        &:hover {
            color: white;
        }

        // 定义上层borde样式
        &-border-stroke {
            border-color: rgba($r, $g, $b, 0.35);

            .btn-borders {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;

                // unhover
                .border-top {
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 1px;
                    background-color: rgb($r, $g, $b);
                    transform: scaleX(0); // X方向缩小到0
                    transform-origin: left; // 基点位置
                    transition: $ease-in-duration $ease-in-direction;
                }

                .border-right {
                    position: absolute;
                    right: 0;
                    width: 1px;
                    height: 100%;
                    background-color: rgb($r, $g, $b);
                    transform: scaleY(0);
                    transform-origin: bottom;
                    transition: $ease-in-duration $ease-in-direction;
                }

                .border-bottom {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 1px;
                    background-color: rgb($r, $g, $b);
                    transform: scaleX(0);
                    transform-origin: left;
                    transition: $ease-out-duration $ease-out-delay $ease-out-direction;
                }

                .border-left {
                    position: absolute;
                    left: 0;
                    width: 1px;
                    height: 100%;
                    background-color: rgb($r, $g, $b);
                    transform: scaleY(0);
                    transform-origin: bottom;
                    transition: $ease-out-duration $ease-out-delay $ease-out-direction
                }
            }

            // hover
            &:hover {
                color: rgb($r, $g, $b);
                background: transparent;

                .border-left {
                    transform: scaleY(1);
                    transition: $ease-in-duration $ease-in-direction;
                }

                .border-bottom {
                    transform: scaleX(1);
                    transition: $ease-in-duration $ease-in-direction;
                }

                .border-right {
                    transform: scaleY(1);
                    transition: $ease-out-duration $ease-out-delay $ease-out-direction;
                }

                .border-top {
                    transform: scaleX(1);
                    transition: $ease-out-duration $ease-out-delay $ease-out-direction;
                }
            }
        }

        //  以上实现了border动画
        &-text-float-up {
            .btn-text {
                display: block;
                transition: 0.75s 0.1s $ease-out-direction;
            }

            // before换成after也是可行的
            &::before {
                content: 'Start';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                opacity: 0;
                transform: translateY(25%);
                transition: 0.25s ease-out;
            }

            &:hover {
                .btn-text {
                    opacity: 0;
                    transform: translateY(-25%); // 如果给25会有种停滞的感觉，给-25会感觉文字消失的感觉
                    transition: 0.25s ease-out;
                }

                &::before {
                    opacity: 1;
                    transform: translateY(0);
                    transition: 0.75s 0.1s $ease-out-direction;
                }
            }
        }
    }
</style>
